<template>
  <div style="heigth: 100%;">
    <div class="btbox btboxbg flexb fontz">
      {{ $t('rex.moreData') }}
    </div>
    <div class="priceNum fontz">
      <div class="nowTotalEos">
        <p>
          {{$t('rex.rexEosPool')}}
          <el-popover
            placement="bottom"
            trigger="hover"
            :content="$t('rex.eosBuyRexRent')">
            <span slot="reference" class="iconfont icon-huaban iconBt"></span>
          </el-popover>
        </p>
        <div class="fontdd flex" :class="Number(allEosChange) < 0 ? 'redColor' : 'greenColor'">
          <span>{{allEos}} EOS</span><i class="iconfont fontz" :class="Number(allEosChange) < 0 ? 'icon-xia' : 'icon-shang'"></i>
        </div>
        <!-- <div class="redColor" v-if="Number(allEosChange) < 0">
          {{allEosChange}} EOS
        </div>
        <div class="greenColor" v-else>
          + {{allEosChange}} EOS
        </div> -->
      </div>
      <div class="nowRemainRam">
        <p>{{ $t('rex.rexCirculation') }}</p>
        <div class="fontdd flex" :class="Number(allRexChange) < 0 ? 'redColor' : 'greenColor'">
          <span>{{allRex}} REX</span><i class="iconfont fontz" :class="Number(allRexChange) < 0 ? 'icon-xia' : 'icon-shang'"></i>
        </div>
        <!-- <div class="redColor" v-if="Number(allRexChange) < 0">
          {{allRexChange}} REX
        </div>
        <div class="greenColor" v-else>
          + {{allRexChange}} REX
        </div> -->
      </div>
      <div class="ramFormula fontz">
        <el-popover
          placement="bottom-start"
          trigger="click"
          :width="350">
          <!-- <div class="formula" :style="$store.state.app.language === 'en' ? 'padding: 0;' : 'padding: 10px;'"> -->
          <div class="formula">
            <div class="flex formulaContent">
              <span class="ramPrice" :style="$store.state.app.language === 'en' ? 'flex: 2.5;-ms-flex: 2.5;-webkit-box-flex: 2.5;' : ''">
                {{ $t('rex.rexPrice') }}
              </span>
              <span class="ramSign"
                :style="$store.state.app.language === 'en' ? 'flex: 0.6;-ms-flex: 0.6;-webkit-box-flex: 0.6;' : ''">
                ≈
              </span>
              <div class="flex">
                <span :style="$store.state.app.language === 'en' ? 'margin-left: 20px;' : 'margin-left: 10px;'">{{ $t('rex.rexEosPool') }}</span>
                <span :style="
                $store.state.app.language === 'en' ?'margin-left: 55px;' :
                $store.state.app.language === 'ko' ?'margin-left: 48px;' :
                'margin-left: 30px;'">
                  {{ $t('rex.rexCirculation') }}
                  </span>
                <em :style="$store.state.app.language === 'en' ? 'width: 220px;' : 'width: 185px;'"></em>
              </div>
            </div>
          </div>
          <div class="formulaTip" slot="reference">
            {{$t('rex.rexPriceFormula')}} <span slot="reference" class="iconfont icon-huaban"></span>
          </div>
        </el-popover>
      </div>
    </div>
    <div
    class="moreData fontz">
      <p class="blackColor">{{ $t('rex.rexNetincome') }}</p>
      <!-- 资源出租的租金 -->
      <p>
        <span class="grayColor">{{ $t('rex.rental') }}</span>
        <span>{{totalRent}}</span>
      </p>
      <!-- RAM交易手续费 -->
      <p>
        <span class="grayColor">{{ $t('rex.ramFee') }}</span>
        <span>{{ eosioRamfee }}</span>
      </p>
      <!-- 短账号竞拍费用 -->
      <p>
        <span class="grayColor">{{ $t('rex.bidnameIncome') }}</span>
        <span>{{ eosioNames }}</span>
      </p>
      <!-- 预计年化收益率
      <p>
        <span class="grayColor">{{ $t('rex.estimatedAPR') }}</span>
        <span class="greenColor">{{rexTableRows.apr || 0.00}}%</span>
      </p> -->
      <!-- 昨日REX年化收益 -->
      <p>
        <span class="grayColor">{{ $t('newpos.rexYearEarnings1') }}：</span>
        <span class="greenColor">{{detInfo.maxRexAnnualizedRate || '0.00'}}%</span>
      </p>
      <p class="blackColor mt15">
        {{ $t('rex.leasingSituation') }}
      </p>
      <!-- 已出租EOS -->
      <p>
        <span class="grayColor">{{ $t('rex.EosRented') }}</span>
        <span>{{totalLent}}</span>
      </p>
      <!-- 剩余可出租EOS -->
      <p>
        <span class="grayColor">{{ $t('rex.EosRentable') }}</span>
        <span>{{totalUnlent}}</span>
      </p>
      <!-- 出租比率 -->
      <p>
        <span class="grayColor">{{ $t('rex.rentRatio') }}</span>
        <span class="greenColor">{{bili}}%</span>
      </p>
    </div>
  </div>
</template>
<script>
// import Io from '@/utils/socket';
// import { EosModel } from '@/utils/eos/index';
import { toFixed } from '@/utils/validate';

export default {
  name: 'right-top',
  data() {
    return {
      totalLent: '0.0000', // 已出租
      totalUnlent: '0.0000', // 剩余可出租
      bili: '0.00', // 出租比率
      totalRent: '0.0000 EOS', // 资源出租的租金
      eosioNames: '0.0000 EOS', // 短账号竞拍费用
      eosioRamfee: '0.0000 EOS', // RAM交易手续费
      detInfo: {
        maxRexAnnualizedRate: null
      },
      allRex: '0.0000', // 全网REX流通量
      allRexChange: '0.0000',
      allEos: '0.0000', // REX专属的EOS池子总量
      allEosChange: '0.0000',
    }
  },
  components: {
  },
  props: {
    rexTableRows: Object
  },
  watch: {
    'rexTableRows.timer': function change() {
      this.handleGetTableRow();
      this.handleGetTableRow1();
    }
  },
  created() {
  },
  mounted() {
    this.handleIncome();
    this.handleGetAllPoolInfo();
  },
  beforeDestroy() {
  },
  methods: {
    handleGetTableRow() {
      const totalLendable = parseFloat(this.rexTableRows.total_lendable, 0); // REX专属的EOS池子总量
      this.totalLent = this.rexTableRows.total_lent; // 已出租
      this.totalUnlent = this.rexTableRows.total_unlent; // 剩余可出租
      this.totalRent = `${toFixed(parseFloat(this.rexTableRows.total_rent, 0), 4)} EOS`;
      this.bili = ((parseFloat(this.rexTableRows.total_lent, 0) / totalLendable) * 100).toFixed(2);
    },
    handleGetTableRow1() {
      const row = this.rexTableRows;
      const totalLendable = parseFloat(row.total_lendable, 0); // REX专属的EOS池子总量
      const totalRex = parseFloat(row.total_rex, 0); // 全网REX流通量
      const allRexStorage = Number(sessionStorage.getItem('allRexStorage'));
      const allEosStorage = Number(sessionStorage.getItem('allEosStorage'));
      if (allRexStorage && totalRex) {
        this.allRexChange = (totalRex - allRexStorage).toFixed(4);
      }
      if (allEosStorage && totalLendable) {
        this.allEosChange = (totalLendable - allEosStorage).toFixed(4);
      }
      this.allRex = totalRex.toFixed(4);
      this.allEos = totalLendable.toFixed(4);
      sessionStorage.setItem('allRexStorage', totalRex);
      sessionStorage.setItem('allEosStorage', totalLendable);
    },
    handleIncome() {
      this.$http.post('/eosRex/income').then((res) => {
        if (res.code !== 0) {
          return;
        }
        this.eosioNames = `${toFixed(res['eosio.names'], 4)} EOS`;
        this.eosioRamfee = `${toFixed(res['eosio.ramfee'], 4)} EOS`;
      });
    },
    // 获取全网矿池信息
    handleGetAllPoolInfo() {
      this.$http.post('/pool/getAccountPoolInfo').then((res) => {
        if (res.code !== 0) return;
        this.detInfo = res.accountPoolInfo;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.greenColor {
  color: $-btn-green !important;
}

.redColor {
  color: $-btn-red !important;
}

.blackColor {
  color: #666 !important;
}

.grayColor {
  color: #999 !important;
}

.moreData {
  padding: 0 15px;

  p {
    margin-bottom: 3px;
  }

  p:last-child {
    margin-bottom: 0;
  }
}

.btbox {
  height: 42px;
  padding: 0 11px;
}

.btboxbg {
  background: $-topcolorf7;
}

.theme-1B1D27 {
  .blackColor {
    color: #7b8db9 !important;
  }
  .grayColor {
    color: #7b8db9 !important;
  }
  .btboxbg {
    background: rgba(0, 0, 0, 0.2);
    color: $-main-color;
  }
}

.ramFormula {
  margin-top: 8px;
  margin-bottom: 15px;

  .formulaTip {
    display: inline;
    padding-left: 15px;
    color: #999;
    &:hover {
      color: #278EDA;
      cursor: pointer;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      margin-top: -1px;
    }
  }
}

.formula {
  padding: 10px;
  font-size: 14px;
  p {
    text-align: left;
    line-height: 24px;
    margin-bottom: 8px;
  }
  .formulaContent {
    height: 50px;
    .ramPrice {
      flex: 2.9;
      text-align: center;
    }
    .ramSign {
      flex: 1;
    }
    div {
      position: relative;
      height: 46px;
      flex: 8;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding-left: 7px;
      span:first-child {
        margin-left: 10px;
      }
      em {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 145px;
        height: 1px;
        background: #666;
      }
    }
  }
}

.priceNum {
  padding: 8px 0 0;

  .nowTotalEos, .nowRemainRam {
    padding-left: 15px;

    .iconBt {
      display: inline-block;
      vertical-align: middle;
      margin-top: -1px;
    }
  }

  .fontdd {
    padding: 4px 0 0;
    font-size: 14px !important;
  }

  .nowRemainRam {
    margin-top: 8px;
  }
  .greenColor {
    color: #67C269;
  }
  .redColor {
    color: #EE1443;
  }
}
</style>

